<template>
  <div class="login-container">
    <div class="login-form-wrapper">
      <div class="login-form">
        <h2>欢迎登录</h2>
        <p class="subtitle">物业管理系统</p>
        
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
          status-icon
          label-position="left"
          label-width="0"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              prefix-icon="User"
              autocomplete="username"
            />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              autocomplete="current-password"
            />
          </el-form-item>
          
          <el-form-item>
            <el-checkbox v-model="loginForm.rememberMe" class="remember-me">
              记住我
            </el-checkbox>
          </el-form-item>
          
          <el-form-item>
            <el-button 
              type="primary" 
              class="login-button"
              :loading="loading"
              @click="handleLogin"
              :disabled="loading"
            >
              {{ loading ? '登录中...' : '登录' }}
            </el-button>
          </el-form-item>
        </el-form>
        
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 定义emit事件
/* eslint-disable-next-line */
const emit = defineEmits(['login-success'])

// 表单数据
const loginForm = reactive({
  username: '',
  password: '',
  rememberMe: false
})

// 加载状态
const loading = ref(false)
// 错误信息
const errorMessage = ref('')
// 表单引用
const loginFormRef = ref(null)
// 路由实例
const router = useRouter()

// 表单验证规则（简化版，不需要验证）
const rules = {}

// 处理登录逻辑
const handleLogin = () => {
  // 设置加载状态
  loading.value = true
  
  // 存储登录状态
  if (loginForm.rememberMe) {
    localStorage.setItem('isLoggedIn', 'true')
    localStorage.setItem('username', loginForm.username)
  } else {
    sessionStorage.setItem('isLoggedIn', 'true')
    sessionStorage.setItem('username', loginForm.username)
  }
  
  ElMessage.success(`欢迎回来，${loginForm.username}`)
  
  // 触发登录成功事件
  emit('login-success')
  
  // 立即跳转到首页
  router.push('/')
  
  // 重置加载状态
  loading.value = false
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-form-wrapper {
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: all 0.3s ease;
}

.login-form-wrapper:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.login-form {
  padding: 40px;
}

.login-form h2 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.subtitle {
  margin: 0 0 30px 0;
  color: #666;
  font-size: 16px;
  text-align: center;
}

.remember-me {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.login-button {
  width: 100%;
  height: 40px;
  font-size: 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.login-button:hover:not(:disabled) {
  transform: scale(1.02);
}

.error-message {
  margin-top: 15px;
  padding: 10px;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
  color: #f56c6c;
  font-size: 14px;
  text-align: center;
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-form-wrapper {
    max-width: 100%;
    margin: 0;
  }
  
  .login-form {
    padding: 30px 20px;
  }
  
  .login-form h2 {
    font-size: 24px;
  }
}
</style>